<template>
  <div class="page cart">
    <div class="title flex jc-sb">
      <a href="#">
        <i class="iconfont icon-xiazai6 flex aic"></i>
        <span class="flex aic">返回</span>
      </a>
      <p class>购物车</p>
      <a href="#" class="flex jc-e">
        <span class="flex aic" @click="editing=!editing">{{editing?'完成':'编辑'}}</span>
      </a>
    </div>
    <div class="content">
      <div v-for="(item,index) in cartList" :key="item.cartId">
        <div class="c-l flex aic jc-e">
          <base-checkbox v-model="item.flag"></base-checkbox>
        </div>
        <div class="c-r">
          <div class="r-l">
            <img :src="item.imgUrl" alt />
          </div>
          <div class="r-r flex fdc jc-sb">
            <p class="f16">【云南】水果</p>
            <P class="f14">果园生态种植 皮薄香甜爽口 富含天然维C</P>
            <div class="header flex jc-sb aic">
              <span class="flex aic">￥{{item.price/100}}</span>
              <p v-if="editing" class="opt-box flex aic">
                <a class="opt" @click="updateBuyNum(item,1)">+</a>
                <a class="num ml-10 mr-10 f999">x{{item.buyNum}}</a>
                <a class="opt" @click="updateBuyNum(item,-1)">-</a>
              </p>
              <span v-else class="f12 flex aic">x{{item.buyNum}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom flex aic aj-c">
      <div class="left flex aic jc-c pl-15 pr-15">
        <base-checkbox v-model="selectAll" @change="changeAll"></base-checkbox>
        <span class="f14">全选</span>
      </div>
      <div class="center fg1 flex aj-e">
        <span class="fg1 flex jc-e f14">合计：</span>
        <i class="iconfont icon-qian"></i>
        <span class="f18">{{totalMoney.toFixed(2)}}</span>
      </div>
      <button @click="delCart" v-if="editing">删除</button>
      <button class="f20" v-else @click="submit">结算</button>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  components: {
    Footer
  },

  data() {
    return {
      // 是否正在编辑
      editing: false,
      cartList: [],
      // 被选中的商品
      selectList: [],
      // 控制全选
      selectAll: false
      // 总价
      // totalMoney: 0
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 根据slectList计算出总价
    totalMoney() {
      let totalMoney = 0;
      this.selectList.forEach(item => {
        let money = (item.price * item.buyNum) / 100;
        totalMoney += money;
      });
      return totalMoney;
    }
  },

  watch: {
    // 单选
    cartList: {
      // newList变化后的cartList
      handler(newList) {
        // 把选中的商品放入this.selectList
        // this.selectList = newList.filter(item=>{
        //   return item.flag === true;
        // })
        this.selectList = newList.filter(item => item.flag);
        // 当所有商品被选中时,全选的按钮为true
        if (this.selectList.length === newList.length) {
          this.selectAll = true;
        } else {
          this.selectAll = false;
        }
      },
      deep: true
    }

    // 监听seletList, 使用计算属性computed更简单
    // selectList:{
    //   handler(newList) {
    //     let totalMoney = 0;
    //       newList.forEach(item=> {
    //         let money = item.price * item.buyNum/100;
    //         totalMoney += money;
    //       })
    //       this.totalMoney = totalMoney;
    //   },
    //   deep: true
    // }

    // 全选
    // selectAll(newVal, oldVal) {}
  },

  methods: {
    async getList() {
      try {
        let res = await this.$axios.get("/cart/all");
        console.log(res);
        res.list = res.list.map(item => {
          return {
            // 把item所有属性和值都拿过来
            ...item,
            flag: false
          };
        });
        this.cartList = res.list;
      } catch (error) {
        // todo
      }
    },

    // 全选
    changeAll() {
      // 如果selectAll的值为true, 将数组里的flag全部设为true,就实现全选,否则全部设为false, 实现全不选
      if (this.selectAll === true) {
        this.cartList.forEach(item => {
          item.flag = true;
          this.selectList.push(item);
        });
      } else {
        this.cartList.forEach(item => {
          item.flag = false;
        });
        // this.selectList = [];
        this.selectList.length = 0;
      }
    },

    /**
     * 删除购物车
     * cartId: 可以是单个的cartId, 也可以是cartId组成的数组
     */
    async delCart() {
      try {
        // 得到选中的商品编号数组
        let cartIdList = this.selectList.map(item => item.cartId);
        let res = await this.$axios.post("/cart/del", { cartId: cartIdList });
        // notInList不被选中的商品
        let notInList = this.cartList.filter(item => {
          // 检查每个商品的cartId是否在cartIdList里面,返回不在的
          return !cartIdList.includes(item.cartId);
        });
        // 重新赋值
        this.cartList = notInList;
      } catch (error) {
        console.log(error);
      }
    },

    // 更新购物车购买数量,num更新的数量
    async updateBuyNum(item, num) {
      // item.buyNum为1不能再减
      if (item.buyNum === 1 && num === -1) return false;

      try {
        let data = {
          cartId: item.cartId,
          buyNum: item.buyNum + num
        };
        let res = await this.$axios.get("/cart/updateNum", data);
        item.buyNum = item.buyNum + num;
      } catch (error) {
        // todo
      }
    },

    async submit() {
      //1.检查用户有没有选择商品, 没有则提示用户
      if (this.selectList.length === 0) {
        this.$toast.fail("您还没选择商品,请选择商品");
        return false;
      }
      //2.发送请求到后台
      try { 
        // 把选中的商品id放入到一个数组里
        let cartId = this.selectList.map(item => item.cartId);
        // 请求参数
        let data = {
          cartId,
          totalMoney: this.totalMoney
        };
        let res = await this.$axios.post("/preOrder/add",data); 
        // 从结果里把preOrderId解构出来
        let { preOrderId } = res.result;
        // 跳转到确认订单页面, 并把preOrderId传过去
        this.$router.push({
          path: '/submit',
          query: {preOrderId}
        })
      } catch (error) {
        // todo
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
.page {
  user-select: none;
  padding-bottom: 200px;
}
.opt-box {
  .opt {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #666;
    text-align: center;
    line-height: 14px;
    cursor: pointer;
  }
}
</style>